// 自定义指令的方式, 来决定此标签是否要移除?
// 1. 根据当前登录用户信息, 权限点英文字符串数组
// 2. 再根据标签上自定义指令传入的标记英文字符串匹配
// 如果没有, 就把当前标签移除

import store from '@/store'

export default { // 给main.js里Vue.use使用包含install配置
  install(Vue) {
    // 创建自定义指令
    Vue.directive('power', {
      inserted(el, binding) { // inserted固定名字配置项, 作用: 当指令所在标签第一次插入到真实DOM的时候, 此函数会自动执行
        // 参数1: 就是指令所在的"原生标签"
        // 参数2: 指令收到的一些值和其他配置 binding.value 拿到v-power指令右侧传入的值
        // 问题: el-button v-power, 为什么返回的是button原生的标签
        // 因为我们写的el-button和v-power都是模板语法, 都会被vue源码解析, 包括inserted调用
        // console.log(el)
        // console.log(binding)
        // console.log(store.state.user.userInfo)
        const pointArr = store.state.user.userInfo.roles.points
        if (!pointArr.includes(binding.value)) {
          // 标签上的标记, 不在用户信息points权限点数组里, 证明此标签它不应该看见
          el.parentNode.removeChild(el)
        }
      }
    })
  }
}
